<%@ include file="../include/taglib.jsp" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!-- Modal -->
<div class="modal-header">
    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
    <h4 class="modal-title">
        修改角色
    </h4>
</div>
<div class="modal-body">
    <form id="editForm" class="form-horizontal style-form">
        <input type="hidden" value="${sysUser.id}" name="id"/>
        <div class="row">
            <div class="col-sm-4">
                <%--<h3>搜索</h3>--%>
                <div class="form-group">
                    <label for="input-check-node" class="sr-only">Search Tree:</label>
                    <input type="input" class="form-control" id="input-check-node" placeholder="Identify node..."
                           value="">
                </div>
                <div class="form-group">
                    <button type="button" class="btn btn-success check-node" id="btn-check-node">选中</button>
                    <button type="button" class="btn btn-danger check-node" id="btn-uncheck-node">取消选中</button>
                </div>
            </div>
            <div class="col-sm-8">
                <%--<h2>Tree</h2>--%>
                <div id="treeview-checkable" class=""></div>
                <h6 style="color: red">(*注意只会保存 较当前登录用户角色级别相同或小于 的角色选项*)</h6>
            </div>
        </div>
    </form>
</div>
<div class="modal-footer">
    <button data-dismiss="modal" class="btn btn-default" type="button" id="cancelBtn">取消</button>
    <button class="btn btn-theme" type="button" id="saveBtn">保存</button>
</div>
<!-- modal -->
<script type="text/javascript">
    $(function () {
        var roleIds = new Set([${sysUser.roleIds}]);

        var defaultData = ${roles_json};

        $("#saveBtn").bind("click", function () {
            var data = $("#editForm").serializeArray();
            var roleIdss = "";
            roleIds.forEach(function (element, index, array) {
                // element: 指向当前元素的值
                // index: 指向当前索引
                // array: 指向Array对象本身
                roleIdss = roleIdss + element + ",";
            });

            if (roleIdss.length > 0) {
                roleIdss = roleIdss.substr(0, roleIdss.length - 1);
            }
            data.push({
                name: "roleIds",
                value: roleIdss
            });
            var package = new AJAXPacket("${ctx}/sysuser/saveRoles");
            package.data.data = data;
            core.ajax.sendPacket(package, function (response) {
                if (response.data.success) {
                    alertMsg.correct("成功！");
                    $("#cancelBtn").click();
                    jumpPageTo('_list');
                } else {
                    alertMsg.error(response.data.errMsg);
                }
            });
            package = null;
        });

        var $checkableTree = $('#treeview-checkable').treeview({
            data: defaultData,
            showIcon: false,
            showCheckbox: true,
            onNodeChecked: function (event, node) {
                roleIds.add(node.id);
                // var valueIterator = roleIds.values();
                // console.log(valueIterator);
                // $('#checkable-output').prepend('<p>' + node.text + ' was checked</p>');
            },
            onNodeUnchecked: function (event, node) {
                roleIds.delete(node.id);
                // var valueIterator = roleIds.values();
                // console.log(valueIterator);
                // $('#checkable-output').prepend('<p>' + node.text + ' was unchecked</p>');
            }
        });

        var findCheckableNodess = function () {
            return $checkableTree.treeview('search', [$('#input-check-node').val(), {
                ignoreCase: false,
                exactMatch: false
            }]);
        };
        var checkableNodes = findCheckableNodess();

        // Check/uncheck/toggle nodes
        $('#input-check-node').on('keyup', function (e) {
            checkableNodes = findCheckableNodess();
            $('.check-node').prop('disabled', !(checkableNodes.length >= 1));
        });

        $('#btn-check-node.check-node').on('click', function (e) {
            $checkableTree.treeview('checkNode', [checkableNodes, {silent: $('#chk-check-silent').is(':checked')}]);
        });

        $('#btn-uncheck-node.check-node').on('click', function (e) {
            $checkableTree.treeview('uncheckNode', [checkableNodes, {silent: $('#chk-check-silent').is(':checked')}]);
        });

    });
</script>